<template>
  <div
    ref="menuRef"
    class="menu-inner _menu-inner"
    :style="innerStyle"
  >
    <slot name="content" />
  </div>
</template>

<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref } from 'vue'

const props = defineProps({
  closeModal: {
    type: Function,
    default:()=>{}
  },
  innerStyle: {
    type: String,
    default:''
  }
})


const menuRef = ref()

const clickEvent = (event: MouseEvent) => {
  const isInMenuInner = (event.target as HTMLDivElement).closest('._menu-inner')
  if (!isInMenuInner) {
    // 不在窗体里面，关闭窗口
    props.closeModal()
  }
}

onMounted(() => {
  window.setTimeout(() => {
    document.addEventListener('click', clickEvent)
  }, 10)
})

onBeforeUnmount(() => {
  document.removeEventListener('click', clickEvent)
})

</script>

<style scoped lang="scss">
.menu-inner {
  position: fixed;

  z-index: 10;
  border-radius: 4px;
  background: #fff;
  outline: none;

  border-radius: 5px;

  position: fixed;
  border-radius: 4px;
  background: #fff;
  // -webkit-app-region: no-drag;
  border-radius: 4px;

  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);

  &:focus {
    outline: none;
  }
}
</style>
